<script setup>
import { defineAsyncComponent } from 'vue';

const { config } = defineProps({
  config: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['change']);

const mapLoading = {
  loadingComponent: {
    template: '<div>加载 A 中...</div>',
  },
  errorComponent: {
    template: '<div>加载失败</div>',
  },
  delay: 200,
  timeout: 5000,
};
const SelectomponentsMap = {
  normal: defineAsyncComponent({
    loader: () => import('./normal.vue'),
    ...mapLoading,
  }),
  commonRole: defineAsyncComponent({
    loader: () => import('./commonRole.vue'),
    ...mapLoading,
  }),
};
const getSelectComponent = () => {
  if (config.sqlArrs) {
    return SelectomponentsMap['normal'] || null;
  } else {
    return SelectomponentsMap[config.sqlForm] || null;
  }
}

const handleChange = (value, showStr) => {
  emits('change', value, showStr);
}
</script>

<template>
  <component
    :config="config"
    :is="getSelectComponent()"
    @change="handleChange"
  />
</template>

<style lang="scss" scoped>

</style>